html{
scroll-behavior: smooth;
}
body{
  background-color: #252525;
  overflow-x:hidden;
  margin:0%;
  padding:0%;
  color:#999999;
  font-family:Yu Gothic;
        -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}
@font-face{
  font-family:Hehe;
  src:url(../BreatheFireIi-2z9W.ttf);
}
@font-face{
  font-family:Gill;
  src:url(../GILC____.TTF);
}
:root{

  --topBarHeight:40px;


  --fontSize45:45px;
  --fontSize20:20px;
  --heightSideBtn:60px;
  --fontSize25:25px;
  --fontSize15:15px;
  --fontSize10:10px;
  --fontSize5:5px;
  --widthScrollbar:10px;
  --magnifierSize:500px;

  --shapeWidth:200px;
  --shapeBorderRight:150px;

  --loadingSize:100px;
}

::-webkit-scrollbar {
  width: var(--widthScrollbar);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #000; 
  border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
  cursor:pointer;
  background: #777777;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #888888; 
}

.nextPrevProject{
  width:7%;
  background-color:#252525;
  position:fixed;
  z-index:200;
  border-radius:5px;
  cursor:pointer;
  font-size:var(--fontSize15);
  text-align: center;
  padding:.5% .5%;
  color:#999999;
  transition:.1s ease;
  bottom:2%;
  box-shadow:0px 0px var(--fontSize15) #000000d3;
}

.nextPrevProject:hover{
  transition:.3s ease;
  scale:1.05;
}

#previous_project{
  left:2%;
}
#next_project{
  right:2%;
}
.softIcon_container{
}
.software_icons{
  z-index:36;
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size:100%;
  border-radius:50%;
  padding:2%;
  margin: 0% 1%;
  bottom:1%;
  float:left;
  transition: .3s ease;
}
.project_miniatures:hover{
  transition:.3s ease;
  scale:1.02;
}
.aboutMeSection{
  margin:1% 0%;
}
#aboutMe{
  width:80%;
  margin:3% 10%;
  float:left;
  font-size:var(--fontSize20);
}
.section_projects{
  margin:0.25% 1%;
  cursor:pointer;
  position: relative;
  width:98%;
  float:left;
  transition: .1s ease;
  z-index:5;
}
.project_img_container{
  position:relative;
}
.section_projects:hover{
  z-index:15;
  scale:1.03;
  transition: .3s ease;
}
.project_title_container{
  z-index:45;
  top:2%;
  width:15%;
  left:1%;
  position:absolute;
}
.date{
  z-index:45;
  font-size:var(--fontSize10);
  float:left;
  margin-top:5%;
  width:100%;
  text-align: center;
}
.title{
  font-size:40px;
  margin:5% 0% 0% 2%;
  font-family:Hehe;
  float:left;
  width:98%;
  text-align: center;
}
.watchMore{
  background-color:#252525;
  margin:1% 17.5% 0% 17.5%;
  width:65%;
  text-align: center;
  font-size:var(--fontSize10);
  border-radius:25px;
  float:left;
  cursor:pointer;
  transition: .3s ease;
  box-shadow:0px 0px var(--fontSize15) #000000d3;
}
.watchMore:hover{
  scale:1.2;
  transition: .3s ease;
}
.underDate_HR{
  width:55%;
  border-radius:25px;
  border:0.5px solid;
  box-shadow:0px 0px 15px #111;
}
.project_elements{
  text-align: center;
  font-size:15px;
}
.left_shape{
  z-index:35;
  position:absolute;
  border-right: var(--shapeBorderRight) solid transparent;
  width:var(--shapeWidth);
  filter:drop-shadow(0px 0px var(--fontSize5) #111);
}
.projects_main_img:first-of-type{
    margin-left:10%;
}
#arisen-1,#arisen-2,#snake-3{
  object-fit:cover;
}
.projects_main_img,
.projects_main_img_mid,
.projects_main_img_mobile{
  pointer-events: none;
  object-position: 0px 0px;
  float:left;
  cursor:pointer;
  border-radius:5px;
  margin-left:.5%;
  width:29.5%;
  filter:drop-shadow(0px 15px 10px #00000099);
}
.projects_main_img_mid{
  margin-left:1%;
  display:none;
  width:48%;
  filter:none;
  box-shadow:0px 0px 10px #000;
}
.projects_main_img_mobile{
  margin-left:0%;
  display:none;
  border-radius:5px;
  width:100%;
}
.img_modal_small{
  float:left;
  margin:.2%;
  padding:0px;
  cursor:pointer;
  transition: .1s ease;
  box-shadow:0px 0px var(--fontSize15) 2px #111;
  border-radius:5px; 
  z-index:0 !important;
}
.img_modal_small2{
  float:left;
  margin:0%;
  padding:0px;
  border-radius:5px; 
  z-index:0 !important;
}
.img_modal_small_transparent{
  float:left;
  margin:.2%;
  padding:0px;
  cursor:pointer;
  transition: .1s ease;
  border-radius:5px; 
  z-index:0 !important;
}
.texture_img_div{
  cursor:pointer;
  background-size:100%;
  background-repeat: no-repeat;
  position:relative;
  transition: .1s ease;
  float:left;
  width:24.6%;
  margin:0.1% 0.2%;
  filter:drop-shadow(0px 0px var(--fontSize15) #111);
}
.img_modal_small:hover,
.texture_img_div:hover{
  z-index:5 !important;
  scale:1.05;
  transition: .3s ease;
}
.texture_name{
  position: absolute;
  font-size:var(--fontSize45);
}
@keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {`
    from { opacity: .8; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

@-ms-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}
.ytLink{
  text-decoration: none;
}
.project-vid{
  cursor: pointer;
  width:100%;
  float:left;
}
.project-img:hover{
  transform:scale(1.01);
}
#footer{
  background-color:#252525;
  width:100%;
  float:left;
  font-size:var(--fontSize15);
  box-shadow:0px 0px var(--fontSize15) #111111dd;
}
#footer-container{
  text-align: center;
  width:100%;
  float:left;
}
.footer-info{
  padding:1%;
  color:white;
  width:31.33%;
  float:left;
}
.footer-info-raw{
  width:100%;
  margin:1.5% 0%;
  float:left;
  text-decoration: none;
  color:white;
}
#social-media{
  width:100%;
  float:left;
}
.footer-line{
  margin:1% 15% 3% 15%;
  background-color:white;
  height:1px;
  width:70%;
  float:left
}
.title-hr-top{
  background-color:#252525;
  height:1px;
  margin-left:40%;
  margin-right:40%;
  width:20%;
  float:left
}
.title-hr-bottom{
  background-color:#252525;
  height:1px;
  margin-left:35%;
  margin-right:35%;
  width:30%;
  float:left
}
.background_blur{
  filter: blur(15px);
  width:100%;
  z-index:-15;
  float:left;
  position:fixed;
  background-size:500%;
  background-repeat: no-repeat;
  height:100%;
}
.fullscreen_img{
  position:relative;
  margin:0% 17.5%;
  z-index:65;
}
#modal_background{
  position:fixed;
  display:none;
  width:100%;
  background-color:#050505ee;
  z-index:35;
  height:1000000px;
}
#close_modal{
  z-index:600;
  position:fixed;
  cursor:pointer;
  right:0;
  background-color:#353535;
  margin:1% 0% 0% 96%;
  font-family:Yu-Gothic;
  font-size:25px;
  padding:1.5% 2%;
  border-radius:25px 0% 0% 25px;
}
#project_description{
  z-index: 10;
  position:absolute;
  margin:3% 0% 0% 50%;
  width:45%;
  font-size:var(--fontSize25);
}
#software{
  z-index: 10;
  position:absolute;
  margin-top:5%;
  margin:40% 0% 0% 52%;
  width:38%;
  font-size:var(--fontSize25);
}
#softwareIcons_container{
  width:50%;
  margin:0% 25%;
}
.software_text{
  margin:4% 0%;
  width:60%;
  float:left;
}
#softwareUsed{
  width:100%;
  text-align: center;
}
.soft_icons{
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size:100%;
  border-radius:50%;
  padding:15.15%;
  margin: 0% 1%;
  float:left;
  transition: .3s ease;
}
.mobile_description_hr{
  display:none;
  width:90%;
  float:left;
  border-radius: 5px;
  border:1px solid;
  border-color:#25252500;
  background-color:#151515;
  margin:0.5% 5% 2% 5%;
}
.soft_icons:hover{
  scale:1.03;
  transition: .3s ease;
}
.project_info{
  width:80%;
  font-family:Yu Gothic;
  font-size:25px;
  float:left;
}
.section {
  width:100%;
  margin-top:2%;
  float:left;
  z-index:1;
}
#zbrush{
  background-image: url('../icons/zbrush_logo.png');
}
#blender{
  background-image: url('../icons/blender_logo.png');
}
#painter{
  background-image: url('../icons/painter_logo.png');
}
#img_1{
  box-shadow:0px 0px var(--fontSize15) 2px #111;
  margin: 0%;
  float:left;
}
.info{
 text-align: center;
 font-size:var(--fontSize25);
 margin:1% 0%;
}
.img-magnifier-glass {
  z-index: 150;
  position: absolute;
  box-shadow:0px 0px var(--fontSize15) #252525;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: var(--magnifierSize);
  height: var(--magnifierSize);
}
.demo-icon zoom-in,
.demo-icon cancel{
  font-size:155px;
}
.button_container_1{
  cursor:pointer;
  margin-top:.1%;
  padding:15px 10px;
  float:left;
  border-radius:50%;
  margin:0% 0% 0% 95%;
  position:fixed;
  box-shadow:0px 0px var(--fontSize15) #250000;
}
.sideBtn_container{
  z-index:600;
  width:2.5%;
  position:fixed;
  margin-top:10%;
  right:0%;
}
.sideBtn{
  margin:0% 0% 55% 0%;
  width:100%;
  height:var(--heightSideBtn);
  z-index:600;
  float:right;
  cursor:pointer;
  position:relative;
  background-color:#252525;
  font-family:Gill;
  font-size:var(--fontSize20);
  transition: .3s ease;
  border-radius:50% 0% 0% 50%;
}
.sideBtn i{
  margin-right:155%;
}

.sideBtn:hover{
  transition: .3s ease;
  scale:1.3;
}
.sideBtnNumber{
  position: absolute;
  width:85%;
  text-align: center;
  margin-left:15%;
  margin-top:35%;
}

 @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to { 
        transform: rotate(360deg);
    }
}
 

 @-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}
#loadingAnim_container{
  display:none;
  position:absolute;
  height:300px;
  width:100%;
  background-color:#252525;
}
.loading {
  width: var(--loadingSize);
  height: var(--loadingSize);
  transform-origin: 50% 50%;
  margin-top: 25%;
  margin-left: 47.4%;
  border:solid 7px #d3d3d3;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
   -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         1.0s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
      
       transition: all 0.5s ease-in;
    animation-name:             rotate; 
    animation-duration:         1.0s; 
    animation-iteration-count:  infinite;
    animation-timing-function: linear; 
}

  #title_container-stylized .title,
  #title_container-hands .title{
    font-family:Gill, sans-serif;
  }


#snail .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #000000d3);
}
#arisen .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #005500);
}
#snake .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #250000);
}
#guitar .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #ff000055);
}

#glutton .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #005555);
}
#slaughterer .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #00000055);
}
#pistol .title{
  filter:drop-shadow(0px 0px var(--fontSize5) #C64E2855);
}










@media only screen and (max-width: 1800px) {
  .title{
    font-size:35px;
  }
}
@media only screen and (max-width: 1550px) {
  .title{
    font-size:30px;
  }
}
@media only screen and (max-width: 1440px) {
  .title{
    font-size:25px;
  }
}
@media only screen and (max-width: 1300px) {
  .date{
    bottom:45%;
  }
}
@media only screen and (max-width: 1000px) {

.project_elements{
  font-size:12px;
}
  
}
@media only screen and (max-width: 830px) {

.project_elements{
  font-size:10px;
}
  .watchMore{
    width:100%;
    margin-left:0%;
    margin-right:0%;
    margin-top:8%;
  } 
}
@media only screen and (max-width: 768px) { 


  .nextPrevProject{
    font-size:var(--fontSize10);
    width:20%;
  }
  #project_description{
    font-size:var(--fontSize10);
  }
  #software{
    font-size:var(--fontSize10);
  }
  #aboutMe{
    margin:5% 10% 3% 10%;
  }
  .project_elements{
    text-align: left;
  }
  .date{
    bottom:45%;
  }
  .sideBtn_container{
    z-index:600;
    width:4.5%;
    position:fixed;
    margin:10% 0% 0% 95.5%;
  }
  .footer-info{
    width:100%;
    padding:0%;
    float:left;
  }
  .projects_main_img{
    width:47%;
    margin-left:1%;
  }
  .projects_main_img:first-of-type{
    margin-left:5%;
  }
  .projects_main_img:nth-of-type(3){
    display:none;
  }
  .projects_main_img_mid{
    display:block;
    margin-top:0.1%;
  }
  .section_projects{
    margin:.5% 0%;
  }
  .footer-info-raw{
    text-align: left;
  }
  .footer-info-raw:nth-child(1),
  .footer-info-raw:nth-child(3),
  .footer-info-raw:nth-child(5){
    width:25%;
    margin:2% 0% 2% 5%;
  }
  .footer-info-raw:nth-child(2),
  .footer-info-raw:nth-child(4),
  .footer-info-raw:nth-child(6){
    width:70%;
    margin:2 0% 2% 0%;
  }
  .footer-line{
    display:none;
  }
}

 @media only screen and (max-width: 600px){
  #project_description{
    font-size:10px;
  }
}
@media only screen and (max-width: 500px) { 
  .fullscreen_img{
    width:100%;
    margin:0%;
  }

  .aboutMeSection{
    margin:4% 0%;
  }
  .nextPrevProject{
    font-size:11px;
    width:25%;
    padding:3% 1%;
  }
  #aboutMe{
    margin:8% 10% 3% 10%;
  }
.underDate_HR{
  display:none
}
  .project_title_container{
    left:0%;
    top:0%;
    width:100%;
    position:absolute;
  }
  #title_container-stylized .date{
    color:#111;
  }
  #title_container-stylized .project_elements{
    color:#111;
  }
  #title_container-stylized .title{
    color:#111;
  }
  .project_elements_container{
    position:absolute;
    top:12%;
    left:2%;
  }
  .project_elements{
    text-align: left;
  }
  .title{
    position:absolute;
    width:100%;
    text-align: left;
    margin:0%;
    left:2%;
    top:2%;
  }
  .watchMore{
    box-shadow:none;
    position: absolute;
    width:30%;
    left:2%;
    bottom:2%;
  }
  .date{
    position: absolute;
    margin:0%;
    top:2%;
    width:35%;
    right:2%;
  }
  .projects_main_img:first-of-type{
    width:100%;
    margin-left:0%;
  }
  .projects_main_img:nth-of-type(2){
    display:none;
  }
  .projects_main_img_mid{
    display:none;
  }
  .projects_main_img_mobile{
    display:block;
    margin-top:0.1%;
  }
  .section_projects{
    margin:1% 0%;
  }
  .left_shape{
    display:none;
  }
  #project_description{
    z-index: 10;
    position:static;
    float:left;
    margin:1% 5%;
    width:90%;
    font-size:var(--fontSize25);
  }
  .mobile_description_hr{
    display:block;
  }
  .info{
    display:none;
  }
  #software{
    z-index: 10;
    position:static;
    margin-top:5%;
    margin:2% 0%;
    width:100%;
    font-size:var(--fontSize25);
  }
  .soft_icons{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size:100%;
    border-radius:50%;
    padding:10%;
    margin: 0% 5%;
    float:left;
    transition: .3s ease;
  }
  .software_row{
    width:100%;
    float:left;
    margin:1% 0%;
  }
  .software_text{
    width:70%;
    text-align:left;
  }
  #softwareUsed{
    width:100%;
    text-align: center;
  }
  .sideBtn_container{
    display:none;
  }
  .img_modal_small{
    width:98.6%;
    pointer-events: none;
  }
}

@media only screen and (max-width: 400px) { 
  .footer-info-raw{
    font-size:11px;
  }
  .nextPrevProject{
    font-size:10px;
    width:28%;
    padding:3% 1%;
  }
}
@media only screen and (max-width: 300px) { 
  .footer-info-raw{
    font-size:8px;
  }
  #aboutMe{
    margin:12% 10% 3% 10%;
  }
  .nextPrevProject{
    font-size:10px;
    width:35%;
    padding:3% 1%;
  }
}

@media only screen and (max-width: 200px) { 
  .footer-info-raw{
    font-size:7px;
  }
  .watchMore{
    display:none;
  } 
}